<template>
  <div class="app-container"
    v-loading="loading">
    <div class="section-label mb20">订单概况</div>
    <div class="section-show">
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon1.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            订单总额（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.order.receiptsTotal}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon2.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            退款订单总额（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.order.refundTotal}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon3.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            订单总数
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.order.orderCnt}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon4.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            退款订单总数
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.order.refundCnt}}</div>
        </div>
      </div>
    </div>
    <div class="section-label mb20 mt20">分销概况</div>
    <div class="section-show">
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon5.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            分销订单总金额（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.agtMap.orderMoneyTotal}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon6.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            分佣总佣金（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.agtMap.withdrawableTotal}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon7.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            提现中佣金（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.agtMap.agtMoneyUncmf}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon8.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            已提现佣金（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.agtMap.agtMoneyCmf}}</div>
        </div>
      </div>
    </div>
    <div class="section-label mt20 mb20">会员概况</div>
    <div class="section-show">
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon9.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            会员可提现余额（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.custMap.withdrawable}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon10.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            会员已提现余额（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.custMap.amountCmf}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon11.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            会员提现中余额（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.custMap.amountUncmf}}</div>
        </div>
      </div>
      <div class="item-show">
        <div class="item-show-icon">
          <img src="@/assets/images/icon12.png"
            alt="" />
        </div>
        <div class="item-show-info">
          <div class="item-show-label">
            不可提现余额（元）
            <el-tooltip class="item"
              effect="dark"
              content="提示文字"
              placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="item-show-num">{{fplInfo.custMap.outstanding}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getFinancialProfile
} from "@/api/djk/financeMgr/financialProfile";

export default {
  data () {
    return {
      loading: false,
      fplInfo: {}
    };
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.loading = true;
      getFinancialProfile().then((response) => {
        this.fplInfo = response.data;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.section-label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
  display: flex;
  align-items: center;
  &:before {
    content: "";
    display: block;
    width: 3px;
    height: 16px;
    border-radius: 1px;
    margin-right: 6px;
    background-color: #ef6a22;
  }
}
.section-show {
  display: flex;
  flex-wrap: wrap;
  .item-show {
    width: 33.3%;
    display: flex;
    align-items: center;
    padding: 10px 30px;
    margin-bottom: 20px;
    .item-show-icon {
      width: 40px;
      height: 40px;
      margin-right: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item-show-info {
      .item-show-label {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #000;
        margin-bottom: 10px;
        .el-icon-question {
          margin-left: 5px;
        }
      }
      .item-show-num {
        font-size: 20px;
        color: #000;
        font-weight: bold;
      }
    }
  }
}
</style>
